<template>
    <div class="content">
        <div class="main">
            <div class="main-box">
                <div class="text">行业分类</div>
                <div id="box" class="box"></div>
                <div id="box1" class="box1"></div>
            </div>
        </div>

    </div>
</template>
<script>
import * as echarts from "echarts";
export default {
    name: 'eachart_demo',
    mounted: function () {
        this.$nextTick(function () {
            this.getPie()
        })
    },
    methods: {
        getPie() {
            // 绘制图表
            var myChart = echarts.init(document.getElementById('box'))
            var myChart1 = echarts.init(document.getElementById('box1'))
            // 指定图表的配置项和数据
            var option = {

                stillShowZeroSum: true,
                //鼠标划过时饼状图上显示的数据
                tooltip: {
                    trigger: 'item',
                    formatter: '{a}<br/>{b}:{c} ({d}%)'
                },

                legend: {//图例  标注各种颜色代表的模块
                    orient: 'vertical',//图例的显示方式  默认横向显示
                    bottom: 20,//控制图例出现的距离  默认左上角
                    left: 150,//控制图例的位置
                     itemWidth: 10,//图例颜色块的宽度和高度
                     itemHeight: 10,
                    textStyle: {//图例中文字的样式
                        color: '#FFF',
                        fontSize: 10
                    },
                    data: ['行业一', '行业二', '行业三', '行业四', '行业五']//图例上显示的饼图各模块上的名字
                },
                //饼图中各模块的颜色
                color: ['#F5C847', '#F36F8A', '#0089FF', '#4AC7F5', '#AF89D6'],
                // 饼图数据
                series: {
                    // name: 'bug分布',
                    type: 'pie',             //echarts图的类型   pie代表饼图
                    radius: '35%',           //饼图中饼状部分的大小所占整个父元素的百分比
                    center: ['40%', '50%'],  //整个饼图在整个父元素中的位置
                    // data:''               //饼图数据
                    data: [                  //每个模块的名字和值

                        { name: '行业五', value: 19.23 },
                        { name: '行业四', value: 28.57 },
                        { name: '行业三', value: 38.46 },
                        { name: '行业二', value: 7.14 },
                        { name: '行业一', value: 6.6 },
                    ],
                    itemStyle: {
                        normal: {
                            label: {
                                show: false,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                                position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                            },
                            labelLine: {
                                show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                            }
                        }
                    },
                }

            }
            var option1 = {
                //标题
                title: {
                    x: 'center',              //标题位置
                    // textStyle: { //标题内容的样式
                    //   color: '#000',
                    //   fontStyle: 'normal',
                    //   fontWeight: 100,
                    //   fontSize: 16 //主题文字字体大小，默认为18px
                    // },
                },

                color: ['#F5C847', '#F36F8A', '#0089FF', '#4AC7F5', '#AF89D6'],
                series: [
                    {
                        type: 'pie',
                        data: [
                            {
                                value: 19.23,
                                name: '19.23%'
                            },
                            {
                                value: 28.57,
                                name: '28.57%'
                            },
                            {
                                value: 38.46,
                                name: '38.46%'
                            },
                            {
                                value: 7.14,
                                name: '7.14%'
                            },
                            {
                                value: 6.6,
                                name: '6.6%'
                            }
                        ],
                        radius: ['40%', '70%'],
                        itemStyle: {
                            normal: {
                                borderWidth: 2,
                                borderColor: '#091232',
                                label: {
                                    show: true,//饼图上是否出现标注文字 标注各模块代表什么  默认是true
                                    position: 'inner',//控制饼图上标注文字相对于饼图的位置  默认位置在饼图外
                                },
                                labelLine: {
                                    show: true//官网demo里外部标注上的小细线的显示隐藏    默认显示
                                }
                            }
                        },
                    }
                ]
            }
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option)
            myChart1.setOption(option1)
        }
    }

}
</script>
<style scoped >
.content {
    position: relative;
    box-sizing: border-box;
   background-color: rgba(15,32,95,0.7);
}

.main-box {
    position: absolute;
    height: 138px;
    width: calc(100%-4px);
    background-image:
        url("../assets/picture/bj-1.png"),
        url("../assets/picture/bj-2.png"),
        url("../assets/picture/bj-4.png"),
        url("../assets/picture/bj-3.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
    z-index: 1;
    top: 1px;
    left: 1px;
    bottom: 1px;
    right: -2px;
}

.main {
    height: 136px;
    width: 100%;
    border: 1px solid #1723b0;
}

.chart {
    width: 100%;
    height: 100%;
    border-top: 1px solid rgb(209, 206, 206);
}

.box {
    opacity: .4;
    position: absolute;
    top: 2px;
    left: 24px;
    width: 200px;
    height: 150px;
}

.box1 {
    position: absolute;
    left: -66px;
    top: -1px;
    width: 340px;
    height: 156px;
}

.text {
    color: rgb(255, 255, 255);
    font-weight: 600;
    font-size: 14px;
    position: absolute;
    left: 7px;
    top: 4px;
}
</style>